<template>
  <div class="app-container">

    <el-card class="box-card" shadow="never">
        <el-steps :active="orderStatus" finish-status="success" class="step">
            <el-step v-for="item in steps" :key="item.title" :title="item.title" :description="item.des"></el-step>
        </el-steps>
    </el-card>

    <el-card shadow="never" class="order_card">
        <div slot="header" class="clearfix">
            <span class="title">订单信息</span>
            <!-- 功能区 -->
            <div class="control">
              <!-- 收货地址更改按钮 -->
              <el-button v-show="!isEditable &&  (orderDetail.status == 1 || orderDetail.status==2)" size="small" class="text-two" @click="onEditable">
                  编辑
              </el-button>
              <el-button type="primary" v-show="isEditable" size="small" class="text-two" @click="onSaveInfo">
                  保存
              </el-button>
              <el-button v-show="isEditable" size="small" class="text-two" @click="onEditable">
                  取消
              </el-button>

              <!-- 其它按钮-->
              <el-button type="primary" v-if="!isEditable &&	orderDetail.status == 2" size="small" @click="sendUp(orderDetail.id)">
                  发货
              </el-button>

              <el-button v-if="orderDetail.status ==3" type="warning" size="small" @click="confirmReceipt(orderDetail.id)">
                  确认收货
              </el-button>

              <el-button  type="danger"  v-if="!isEditable &&	 orderDetail.status ==1"   size="small" @click="confirmCancel(orderDetail.id)">
                  取消订单
              </el-button>

              <el-button  type="info"     size="small" @click="goBack()">
                  返回
              </el-button>

            </div>
        </div>

        <!--收货信息 -->
        <el-form label-width="90px" :inline="false" size="small" class="order_form">
          <h3>收货人信息</h3>
          <el-row :gutter="20">
             <!--  左边第一列-->
              <el-col :span="8" :offset="0">

                <el-form-item label="收货姓名：">
                    <el-input v-model="info.name" v-if="isEditable" size="small" placeholder="请输入" clearable>
                    </el-input>
                    <span v-else>{{orderDetail.consignee || "-"}}</span>
                </el-form-item>


                <el-form-item label="联系人电话：">
                    <el-input v-model="info.phone" v-if="isEditable" size="small" placeholder="请输入" clearable>
                    </el-input>
                    <span v-else>{{ orderDetail.phone || "-" }}</span>
                </el-form-item>

                <el-form-item label="收货地址：">
                    <el-input v-model.trim="info.address" v-if="isEditable" size="small"
                        placeholder="例重庆市渝北区建设花园小区1栋23-2" clearable></el-input>
                    <span v-else>{{ orderDetail.address || "-" }}</span>
                </el-form-item>

              </el-col>


              <!-- 第二列 -->
              <el-col :span="8" :offset="0">
                <el-form-item label="订单编号：">
                    {{ orderDetail.number || "-" }}
                    <span class="copy pointer" @click="onCopy(orderDetail.number)">复制</span>
                </el-form-item>
                <el-form-item label="下单时间：">{{ orderDetail.orderTime || "-" }}
                </el-form-item>
                <el-form-item label="支付时间：">{{ orderDetail.checkoutTime || "-" }}
                </el-form-item>
              </el-col>

              <!-- 第三列 -->
              <el-col :span="8" :offset="0">
                <el-form-item label="订单状态：">
                   <span v-if=" orderDetail.status==1">待付款</span>
                   <span v-if=" orderDetail.status==2">待发货</span>
                   <span v-if=" orderDetail.status==3">已派送</span>
                   <span v-if=" orderDetail.status==4">已完成</span>
                   <span v-if=" orderDetail.status==5">已取消</span>
                </el-form-item>
                <el-form-item label="支付方式：">{{  payMethodValue }}
                </el-form-item>
                <el-form-item label="订单备注：">{{ orderDetail.remark || "-" }}
                </el-form-item>
              </el-col>

          </el-row>
        </el-form>

         <div class="dir"></div>
         <h3>商品信息</h3>
         <!-- 商品信息 -->
        <el-table :data="orderDetail.drug" border style="width: 100%"   >
           <template slot="empty">
               <div class="data-empty">
                   <img src="@/assets/empty.png" alt="暂无数据" />
                   <span class="empty-text">暂无数据</span>
               </div>
           </template>

           <el-table-column label="商品图片" width="100">
                 <template slot-scope="scope">
                     <div style="position:relative">
                         <el-image style="width: 50px; height: 50px" :src="scope.row.image"></el-image>
                     </div>
                 </template>
             </el-table-column>
             <el-table-column label="商品名称" prop="name"></el-table-column>
             <el-table-column label="单价（元）">
                 <template slot-scope="scope">
                     <span>￥{{scope.row.amount.toFixed(2)}}</span>
                 </template>
             </el-table-column>
             <el-table-column label="数量" prop="number"></el-table-column>
             <el-table-column label="小计（元）">
                 <template slot-scope="scope">
                     {{(scope.row.amount * scope.row.number).toFixed(2)}}
                 </template>
             </el-table-column>
             <el-table-column label="备注" prop="dishFlavor"></el-table-column>
        </el-table>

         <div class="l_table_footer">
                <span v-if="orderDetail.status>=2 && orderDetail.status<=4" class="touch_right payPrice"><i>实收金额：</i>¥{{ orderDetail.payPrice || "-" }}</span>
                <span class="touch_right"><i>商品总价：</i>¥{{ orderDetail.amount }}</span>
         </div>

    </el-card>


  </div>
</template>

<script>
  import {findByIdApi} from '@/api/orders.js'
  export default {
    data() {
      return {
        steps: [
            {
                title: "买家下单",
                des: ""
            },
            {
                title: "买家付款",
                des: ""
            },
            {
                title: "发货",
                des: ""
            },
            {
                title: "买家确认收货",
                des: ""
            }
        ],
        orderStatus: 1,
        // 是否编辑收货人信息
        isEditable: false,
        //订单编号
        orderId: undefined,
        //订单详情
        orderDetail: {
          status: 1
        },
        //收货人信息
        info: {

        }
      }
    },
    //计算属性
    computed: {
      //支付方式
      payMethodValue() {
        //有数据
        if(this.orderDetail.number){
            return this.orderDetail.payReceipt || "-"
        }else{
          return "-"
        }
      }
    },
    methods: {
       // 收货人信息 是否可编辑
       onEditable() {
           this.info = {
               address: this.orderDetail.address ? this.orderDetail.address.replaceAll(",", "") : '',
               id: this.orderId,
               name: this.orderDetail.consignee,
               phone: this.orderDetail.phone
           };
           this.isEditable = !this.isEditable;
       },
       //保存收货人信息
       onSaveInfo(){

       },
       //发货
       sendUp(id){

       },
       //确认收货
       confirmReceipt(id){

       },
       //复制数据
       onCopy(value){
         let oInput = document.createElement("input");
         oInput.value = value;
         document.body.appendChild(oInput);
         oInput.select(); // 选择对象;
         document.execCommand("Copy"); // 执行浏览器复制命令
         this.$message({
             message: "复制成功",
             type: "success"
         });
         oInput.remove();
       },
       //返回订单查询界面
       goBack(){
         this.$router.go(-1);
       },
       fetchDetailInfo(){
         findByIdApi(this.orderId).then(resp=> {
             this.orderDetail= resp.data
             this.orderStatus= this.orderDetail.status
         }).catch(e=> {
            this.$router.go(-1);
         })
       }
    },
    created(){
      const params=this.$route.params;
      const id= params.id
      if(id){
         this.orderId=id;
         this.fetchDetailInfo()
      }else{
        this.$message({
            message: "参数不正确",
            type: "danger"
        });
        this.$router.go(-1);
      }
    }
  }
</script>

<style scoped lang="scss">

  .app-container{
    background-color: #dedede;
    padding: 0;
    padding-top: 5px;
  }
  .order_card {
      .order_form {
          margin-left: 0;
          margin-right: 0;
      }

      ::v-deep(.el-card__header) {
          border-bottom: none;
          padding: 16px 32px;

          .clearfix {
              display: flex;

              >span {
                  line-height: 24px;
                  color: rgba(0, 0, 0, 0.85);
                  font-size: 16px;
                  font-weight: 700;
              }

              .control {
                  margin-left: auto;
                  padding-top: 5px;
              }
          }
      }

     ::v-deep(.el-card__body) {
          padding-top: 0;
      }

     ::v-deep(.el-form-item__label) {
          display: block;
          text-align: left;
          line-height: 22px;
          font-size: 14px;
      }

      ::v-deep(.el-form-item__content) {
          line-height: 22px;
      }

      .detail_col {
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          ::v-deep(.el-form-item--small.el-form-item) {
              margin-bottom: 10px;
          }

          ::v-deep(.el-form-item__label) {
              padding-right: 5px;
          }
      }

      .copy {
          color: #1890ff;
          margin-left: 8px;
          line-height: 22px;
          font-size: 12px;
      }

      .dir {
          background: #e8e8e8;
          height: 1px;
          width: 100%;
          margin: 24px 0;
      }

      .title {
          font-weight: 700;
          color: rgba(0, 0, 0, 0.85);
          font-size: 16px;
          padding-bottom: 10px;
          display: inline-block;
      }

      .tips {
          display: flex;
          align-items: center;

          .to-right {
              margin-left: auto;
          }

          .to-left {
              margin-right: auto;
          }
      }

      .vip-icon {
          img {
              margin: 40px 0 11px;
              height: 32px;
              width: 32px;
          }

          b {
              margin-top: 8px;
              line-height: 32px;
              color: #333;
          }

          .fs28 {
              font-size: 28px;
          }

          .fs22 {
              font-size: 22px;
          }

          .line {
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
          }
      }

      .l_table_footer {
          margin-top: 27px;
          width: 100%;
          height: 25px;
          display: flex;
          flex-direction: row-reverse;

          .touch_right {
              display: flex;
              align-items: center;
              font-size: 14px;
              line-height: 22px;
              margin-left: 64px;
              color: rgba(36, 36, 36, 1);

              i {
                  color: rgba(0, 0, 0, 0.65);
                  font-style: normal;
              }

              .question {
                  height: 14px;
                  width: 14px;
                  margin: 5px 0 0 7px;
              }
          }
          .payPrice{
            font-size: 18px;
            font-weight: 700;
          }
      }
  }

  .box-card {
    margin-bottom: 5px;
    .card_header {
        line-height: 32px;
        .flex1{
          flex: 1;
        }
        .warning-text{
          color: #FF8D24;
          padding-left: 22px;
        }
        .selected_text{
          padding-right: 16px;
        }
      }
      .table-query{
        padding-bottom: 30px;
        .el-input{
          width: 200px;
          margin-right: 34px;
        }
      }
  }
</style>
